<template>
  <el-dialog
    :show-close="false"
    v-model="dialogVisible"
    width="500px"
    destroy-on-close
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header flex_sb">
        <span :id="titleId" :class="titleClass">开票信息确认</span>
        <div class="flex">
          <span class="money">开票金额：</span>
          {{ baseFrom?.invoice_amount || '0.00' }}
        </div>
      </div>
    </template>

    <el-form
      v-loading="loading"
      ref="baseFormRef"
      :model="baseFrom"
      label-position="left"
      label-width="80px"
      :rules="rules"
    >
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="结算组织" prop="sales_org_name">
            <VabInputForm
              disabled
              :options="InvoicableType"
              v-model="baseFrom.sales_org_name"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="开票类型" prop="invoice_type">
            <VabSelectForm
              :options="InvoicableType"
              v-model="baseFrom.invoice_type"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="发票抬头" prop="invoice_title">
            <VabInputForm v-model="baseFrom.invoice_title" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="公司税号" prop="tax_register_code">
            <VabInputForm v-model="baseFrom.tax_register_code" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="开户银行" prop="invoice_bank_name">
            <VabInputForm v-model="baseFrom.invoice_bank_name" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="银行账号" prop="invoice_bank_account">
            <VabInputForm v-model="baseFrom.invoice_bank_account" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <span class="flex_center">
        <VabButton title="取消" @click="dialogVisible = false" />
        <VabButton
          type="primary"
          title="确认"
          @click="submitForm(baseFormRef)"
        />
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
  import { FormInstance } from 'element-plus'
  import { ref } from 'vue'
  import { ReturnReduce } from '~/src/utils/utils'
  import { InvoicableType } from './tools'
  import { getInvoiceInfo, invoiceApply } from '~/src/api/dms/invoice'

  /**
   * @var
   */
  const proxy: any = getCurrentInstance()?.proxy

  const dialogVisible = ref(false)
  const baseFrom = ref<any>({
    invoice_amount: '',
    invoice_type: '',
    invoice_title: '',
    tax_register_code: '',
    invoice_bank_name: '',
    invoice_bank_account: '',
  })
  const baseFormRef = ref()
  const rules = {
    sales_org_name: [
      {
        required: true,
        message: '结算组织不能为空',
        trigger: 'blur',
      },
    ],
    invoice_type: [
      {
        required: true,
        message: '开票类型不能为空',
        trigger: 'blur',
      },
    ],
    invoice_title: [
      {
        required: true,
        message: '发票抬头不能为空',
        trigger: 'blur',
      },
    ],
    tax_register_code: [
      {
        required: true,
        message: '公司税号不能为空',
        trigger: 'blur',
      },
    ],
    invoice_bank_name: [
      {
        required: true,
        message: '开户银行不能为空',
        trigger: 'blur',
      },
    ],
    invoice_bank_account: [
      {
        required: true,
        message: '银行账号不能为空',
        trigger: 'blur',
      },
    ],
  }

  const loading = ref(false)

  /**
   * @method
   */

  const emit = defineEmits(['refresh'])

  // 打开
  const open = async (row: any[]) => {
    dialogVisible.value = true
    loading.value = true

    const uid = ReturnReduce(row, 'uid')

    const res = await getInvoiceInfo({ uid })

    const { invoice_type, amount } = res.data

    baseFrom.value = {
      ...res.data,
      invoice_amount: amount,
      invoice_type: `${invoice_type}`,
      uid,
      sales_org_name: row[0]?.sales_org_name || '',
    }

    delete baseFrom.value.amount

    loading.value = false
  }
  // 关闭
  const close = () => {
    dialogVisible.value = false
  }
  // 提交
  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return

    await formEl.validate((valid, fields) => {
      if (!valid) return
      invoiceApply({ ...baseFrom.value }).then((res: any) => {
        proxy.$Message('开票申请上传成功!', 'success')
        emit('refresh')
        close()
      })
    })
  }

  defineExpose({
    open,
    close,
  })
</script>
<style scoped>
  .dialog-footer button:first-child {
    margin-right: 10px;
  }

  .money {
    font-size: 16px;
    color: #f01414;
  }
</style>
